<template>
  <section class="dy-box">
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item" href="javascript:" @tap="handleExplore(1)"><span>搜索</span></a>
      <a class="mui-control-item mui-active" href="javascript:"  @tap="handleExplore(2)"><span>动态</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(3)"><span>发现</span></a>
      <a class="mui-control-item" href="javascript:"  @tap="handleExplore(4)"><span>商城</span></a>
    </div>
    <div class="dy-item" v-for="item in dynamics">
      <div class="dy-top flex">
        <div class="dy-u-pic">
          <img :src="item.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'" alt="头像">
        </div>
        <div>
          <p class="dy-u-name" v-text="item.nickname">用户***</p>
          <p class="dy-u-info">{{item.age}}岁 | {{item.height}} | {{item.education}} | {{item.income}}</p>
        </div>
      </div>

      <div class="dy-middle">
        <p class="dy-u-cont mh-mg-tb" v-text="item.content">--</p>
        <div class="dy-img-list flex" v-if="item.images.length">
          <div v-for="picItem in item.images" class="pic-box" :class="{only: item.images.length === 1}">
            <img :src="picItem || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'" alt="配图">
          </div>
        </div>
        <p class="dy-time" v-text="item.time">9小时前</p>
      </div>

<!--       <div class="dy-foot mui-text-right">
        <a href="javascript:">
          <img src="../../assets/images/ico/ic_t_gift.png" alt="图标">
          <span>送礼物</span>
        </a>
        <a href="javascript:">
          <img src="../../assets/images/ico/ic_e_share.png" alt="图标">
          <span>分享</span>
        </a>
      </div> -->
    </div>

    <div class="release-dy" @tap="releaseDynamic">+</div>
  </section>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "explore-dynamic",
    data () {
      return {
        dynamics: [
          {
            id: '1',
            name: '吉安',
            age: 23,
            height: 187,
            edu: '本科',
            income: '4000-5000',
            content: '啊建行卡号个股的客户佳斯哦i如图',
            time: '9小时前',
            pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
            imgList: [
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925093698,3746283339&fm=11&gp=0.jpg',
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4091694486,3911007811&fm=11&gp=0.jpg'
            ]
          }
        ]
      }
    },
    methods: {
      handleExplore (i) {
        switch (i) {
          case 1 :
            this.$router.replace({
              path: '/explore/search'
            });
            break;
          case 2:
            this.$router.replace({
              path: '/explore/dynamic'
            });
            break;
          case 3:
            this.$router.replace({
              path: '/explore/find'
            });
            break;
          case 4:
            this.$router.replace({
              path: '/explore/mall'
            });
            break;
          default:
            this.$router.replace({
              path: '/explore/search'
            });
        }
      },
      releaseDynamic () {
        this.$router.push({
          path: '/explore/release'
        })
      }
    },
    created(){
      let self = this;
      MH_API.getTwitters({
        page: 1,
        limit: 10
      }).then(res => {
        if (res.status === 200) {
          self.dynamics = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .sub-control {border-bottom: 1px solid #eee;}
  .dy-u-pic {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .5rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .dy-u-name {@include sc(1.5rem, #333);}
  .dy-u-info {@include sc(1.2rem, #999);}
  .dy-u-cont {@include sc(1.3rem, #666);}
  .dy-time {@include sc(1rem, #999);}
  .dy-item {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
  }
  .pic-box {
    width: 11.1rem;
    height: 11.2rem;
    margin: .2rem;
    overflow: hidden;
    &.only {
      img {max-height: 11.2rem;}
    }
    img {width: 100%;}
  }
  .dy-foot {
    a {
      margin-left: 1.5rem;
      @include sc(1rem, #999);
    }
    img {width: 1.2rem;}
  }
  .release-dy {
    position: fixed;
    width: 3.35rem;
    height: 3.35rem;
    line-height: 3.35rem;
    text-align: center;
    border-radius: 100%;
    @include sc(2rem, #fff);
    right: 1rem;
    bottom: 5.5rem;
    background: linear-gradient(144deg, #dd65a1 0%, #fa625a 100%);
    box-shadow: 0 0 .1rem rgba(222,101,158, .6);
  }
</style>
